<template>
  <div class="box">
    <div class="top">
      <img src="../../static/images/contact.jpg" alt="">
    </div>
    <div class="intro">
      <p><strong>美利兹英语</strong>专注于英语口语教学，真正实现英语教学的通俗化、平民化、系统化和高效化，也就是要做到内容通俗适用、价格低廉合适、知识系统全面、方法简单高效。真正把英语当成交流工具进行教学，而不是将其作为学科进行研究。</p>
      <p><strong>美利兹英语</strong>意在实现“一辈子，一本教材，说好英语”：学习者在学好一本教材后具备日常英语交流能力和全面的自学能力，从而可以自主观看学习英语影视剧，也可以随意选择学习其他书籍或新闻报刊等，进一步提高自己的英语水平。</p>
      <p>在教学上，美利兹英语绝不依赖于传统教学材料和教学方法，而是在教材和课程设计上加大教研力度，力求创新、实用、系统和高效。自主研发的《美利兹英语口语教程》以其特有的通俗实用性和系统全面性获得了国内外老师的一致认可，让学习者对英语学习再也不会感到不知所措，可以边用边学，在听说过程自然而然地不断提高英语水平。</p>
      <p>美利兹英语隶属江苏美利兹文化发展有限公司，公司拥有专业的管理团队、教研团队和服务团队，师资力量稳定过硬，教学经验丰富，很多是来自名牌大学的毕业生和研究生，也有来自欧美地区的外教老师。</p>
    </div>
    <div class="teacher">
      <h3 class="title">优秀老师介绍</h3>
      <ul>
        <li v-for="(v, k) in teacherList" :key="k">
          <img src="../../static/images/teacher.jpg" alt="">
          <div class="tinfo">
            <h3>{{v.name}} <span>{{v.rank}}</span></h3>
            <p>专注于英语口语教学，真正实现英语教学的通俗化、平民化、系统化和高效,也就是要做到内容通俗适用、价格低廉合适</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import * as info from '../api/info'
export default {
  name: 'pinpai',
  data () {
    return {
      teacherList: [],
      pate: 1
    }
  },
  mounted () {
    this.getTeachers()
  },
  methods: {
    getTeachers () {
      info.getTeachers(this.page, 5)
        .then(res => {
          console.log(res)
          this.teacherList = res.data
          this.page++
        })
    }
  }
}
</script>

<style scoped>
.box{
  padding-bottom: .5rem;
}
.top img{
  display: block;
}
.intro{
  padding-top: .4rem;
}
.intro .title{
  height: 1rem;
  line-height: 1rem;
  padding: 0 .3rem;
  color: #000;
  font-size: .42rem;
  background: #e6e6e6;
}
.intro p{
  padding: 0 .3rem;
  font-size: .37rem;
  line-height: .6rem;
  color: #333;
  text-indent: .3rem;
  margin-bottom: .2rem;
}
.teacher .title{
  height: 1rem;
  line-height: 1rem;
  background: #e6e6e6;
  color: #000;
  font-size: .42rem;
  padding: 0 .3rem;
}
.teacher ul{
  padding: 0 .3rem;
}
.teacher li{
  padding: .3rem 0;
  display: flex;
  display: -webkit-flex;
  border-bottom: 1px solid #e1e1e1;
}
.teacher li img{
  width: 3rem;
  height: 2.6rem;
  flex-shrink: 0;
  margin-right: .3rem;
}
.teacher .tinfo{
  flex-grow: 1;
}
.teacher .tinfo h3{
  font-size: .4rem;
  color: #000;
  margin-bottom: .3rem;
}
.teacher .tinfo h3 span{
  color: #007aff;
  margin-left: .2rem;
}
.teacher .tinfo p{
  font-size: .36rem;
  line-height: .56rem;
  color: #333;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
</style>
